<template>
	<view>

		<swiper circular :style="'width: '+ windowWidth +'rpx; height: '+ windowHeight +'rpx; background-color: #000;'"
			:vertical="true" duration="300" @change="change">
			<swiper-item v-for="(item,index) in video_list" :key="index">

				<!-- 视频区域 -->
				<view class="video_body">
					<video :style="'width: '+ windowWidth +'rpx; height: '+ windowHeight+'rpx;'" :src="item.url"
						:id="item.id" loop="true" autoplay="true" :show-fullscreen-btn="false" object-fit="cover">
					</video>
				</view>

			</swiper-item>
		</swiper>
		<!-- 点赞与收藏区域，在视频区域右下角，浮于视频上方 -->
		<view class="video_like_collect">
			<!-- 点赞 -->
			<view class="icon" style="margin-bottom: 80rpx;">
				<view class="iconinside">
					<text class="icon-yishoucang iconfont"></text>
				</view>
				<view>
					<text style="font-size: 28rpx;">1008686</text>
				</view>
			</view>
			<!-- 收藏 -->
			<view class="icon" style="margin-bottom: 80rpx;" @click="togglePay('bottom')">
				<!-- <image src="@/static/sc.png" style="width: 40px;height: 40px;"></image> -->
				<view class="iconinside">
					<text class="icon-shoucangxuanzhong-copy iconfont"></text>
				</view>
				<view>
					<text style="font-size: 28rpx;">追剧</text>
				</view>
			</view>
			<view class="icon" @click="toggleEp('bottom')">
				<view class="iconinside">
					<text class="icon-mulu iconfont"></text>
				</view>
				<view>
					<text style="font-size: 28rpx;">选集</text>
				</view>
			</view>
		</view>


		<!-- 弹出层 -->
		<uni-popup ref="ep" background-color="#fff">
			<view
				:style="'width: '+ windowWidth +'rpx; height: '+ (windowHeight*0.645) +'rpx; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'"
				class="pop_container">
				<view class="pop_head">
					<view class="video_name">
						<view class="">
							<text class="icon-dianshiji iconfont" style="font-size: 40rpx;"> xxx剧名</text>
						</view>
						<view style="font-size: 30rpx;">
							<text>共XXX集 | </text><text style="color: seagreen;">正在播放第x集</text>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="pop_body">
					<scroll-view scroll-y="true" enable-flex="true" class="scroll" @scrolltolower="lower">
						<view class="baba">
							<view v-for="(value,index) in test_allImgList" :key="index" class="scroll-item">
								<image
									src="https://image.szytcm8.com/image/20231017/68b83048ca3bcd3244a0cdf3cc80435d.jpg"
									mode="aspectFill" class="scroll-img"></image>
								<view v-if="value.status == 1" class="video_status_unlock">
									<text>已解锁</text>
								</view>
								<view v-else class="video_status_lock">
									<text>未解锁</text>
								</view>
								<view class="video_ep">
									<text>第{{value.data}}集</text>
								</view>
							</view>
						</view>

					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<!-- 充值模板 -->
		<uni-popup ref="pay" background-color="#fff">
				<view
					:style="'width: '+ windowWidth +'rpx; height: '+ (windowHeight * pay_height_per) +'rpx; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'"
					class="pop_container">
					<view class="pop_head">
						<view class="video_name">
							<view class="">
								<text style="font-size: 36rpx;"> 充值解锁后可在『微信小程序』继续观看</text>
							</view>
							<view style="font-size: 30rpx;display: flex;justify-content: space-between;">
								<view>
									<text>解锁本集: </text><text style="color: goldenrod;">XX金币/赠币</text>
								</view>
								<view>
									<text>余额X金币 + X赠币</text>
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="pop_body_pay">
						<scroll-view scroll-y="true" enable-flex="true" class="scroll_pay" @scrolltolower="lower">
							<view class="baba_pay">
								<view v-for="(value,index) in pay_data_1" :key="index" class="scroll-item-pay">
									<view v-if="value.label" class="label_color2">	<!-- 后续需要换色要再做判断来选择底色，标签和赠送是可选的 -->
										<text>{{value.label}}</text>
									</view>
									<view v-else class="label_no_color">	<!-- 后续需要换色要再做判断来选择底色，标签和赠送是可选的 -->
										<text>{{value.label}}</text>
									</view>
									<view style="margin-top: 66rpx;font-size:55rpx;">
										<text>{{value.money}}元</text>
									</view>
									<view style="margin-top: 12rpx; font-size: 28rpx; color: darkgray;">
										<text>{{value.golds}}</text>
									</view>
									<view v-if="value.give" class="block_bottom" style="color: brown;">
										<text>{{value.give}}</text>
									</view>
								</view>
							</view>
				
						</scroll-view>
					</view>
					<view class="tips">
						<text style="margin-left: 30rpx;">温馨提示：天王盖地虎</text>
					</view>
				</view>
			
		</uni-popup>


	</view>
</template>

<script>
	import "@/static/icon/iconfont.css"
	import {
		watch
	} from 'vue'
	export default {
		data() {
			return {
				safeArea: 0, // 底部安全区
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				screenWidth: 0,
				// videoHeight: 0, //视频部分高度
				// videoWidth: 0, //视频部分宽度
				video_list: [],
				test_allImgList: [
					{'status':'1','data':1},
					{'status':'1','data':2},
					{'status':'1','data':3},
					{'status':'1','data':4},
					{'status':'1','data':5},
					{'status':'0','data':6},
					{'status':'0','data':7},
					{'status':'0','data':8},
					{'status':'0','data':9},
					{'status':'0','data':10},
					{'status':'0','data':11},
				],
				pay_data_length:0,
				pay_data_1:[
					{'label':'超值','money':'99.88','golds':'1000金币+500金币','give':'多送88元'},
					{'label':'超值','money':'999.88','golds':'888金币+520金币','give':'多送99元'},
					{'label':'','money':'888.88','golds':'250金币+890金币','give':''},
					{'label':'超值','money':'19.88','golds':'25金币+450金币','give':'多送18元'},
					{'label':'超值','money':'1.88','golds':'50金币+500金币','give':'多送98元'},
					{'label':'超值','money':'1.88','golds':'50金币+500金币','give':'多送98元'},
					{'label':'超值','money':'1.88','golds':'50金币+500金币','give':'多送98元'},
				],
				pay_data_2:[
					{'label':'超值','money':'99.88','golds':'1000金币+500金币','give':'多送88元'},
					{'label':'超值','money':'999.88','golds':'888金币+520金币','give':'多送99元'},
				],
				pay_height_data:[0.33,0.5,0.64],//充值模板，<=2、 <=4、>4的模板高度选项
				pay_height_per:0,
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.safeArea = res.safeAreaInsets.bottom;
				}
			})
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea

			this.windowWidth = (750 * this.windowWidth) / this.screenWidth //转rpx
			this.windowHeight = (750 * this.windowHeight) / this.screenWidth //转rpx
			// this.videoWidth = this.windowWidth
			// this.videoHeight = this.windowHeight

			console.log(this.screenWidth, this.safeArea, this.windowHeight, this.windowWidth)



			this.getVideoList() //模拟请求视频列表

			//如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间
			uni.setNavigationBarTitle({ //测试使用，正式使用在页面启动前获取数据
				title: "XXX剧",
			})

			//获取充值列表数据长度，选择合适高度
			this.pay_data_length = this.pay_data_1.length

			if(this.pay_data_length <= 2){
				this.pay_height_per = this.pay_height_data[0]

			}
			else if(this.pay_data_length <= 4){
				this.pay_height_per = this.pay_height_data[1]
			}
			else{
				this.pay_height_per = this.pay_height_data[2]
			}


		},
		methods: {
			getVideoList() {
				// 测试数据
				this.video_list = [{
						'id': 1,
						'url': 'https://image.szytcm8.com/image/20231024/vf1446959.mp4'
					},
					{
						'id': 2,
						'url': 'https://image.szytcm8.com/image/20231024/vf1446959.mp4'
					},
					{
						'id': 3,
						'url': 'https://image.szytcm8.com/image/20231024/vf1446959.mp4'
					},
				]
			},
			toggleEp(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$nextTick(() => {
					this.$refs.ep.open(type)

				})
			},
			togglePay(type) {
				this.$nextTick(() => {
					this.$refs.pay.open(type)

				})
			},
			change(event) {
				console.log(event)
				uni.setNavigationBarTitle({ //测试使用，正式使用在页面启动前获取数据
					title: "XXX剧 第" + event.detail.current + "集"
				})
			},
		}
	}
</script>

<style>
	.video_body {
		/* background-color: blue; */
		width: 100%;
		height: 100%;
		/* top: 30px; */

	}

	.video_like_collect {
		position: absolute;
		top: 50vh;
		/*相对高度*/
		/* background-color: limegreen; */
		right: 6rpx;
		text-align: center;
		flex-direction: column;
		padding-bottom: 10rpx;

	}

	.icon {
		/* background-color: grey; */
		text-align: center;
		flex-direction: column;
		line-height: 20rpx;
	}

	.icon text {
		font-size: 80rpx;
		color: white;
	}

	.iconinside {
		margin-bottom: 20rpx;
	}

	.pop_container {
		position: relative;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
		align-items: center;
	}

	.pop_head {
		/* background-color: seagreen; */
		position: absolute;
		top: 0;
		height: 135rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.video_name {
		/* background-color: grey; */
		width: 100%;
		/* height: 90%; */
		margin: 30rpx;
		/* 		line-height: 90%; */
		display: flex;
		/* align-items: center; */
		justify-content: center;
		flex-direction: column;
		line-height: 60rpx;
	}

	.pop_body {
		/* background-color: grey; */
		position: absolute;
		z-index: 120;
		height: calc(100% - 2rpx - 135rpx);
		/*出问题检查rpx是否可以计算*/
		width: 100%;
		bottom: 0;
		display: flex;
		justify-content: center;
	}

	.pop_body_pay {
		/* background-color: grey; */
		position: absolute;
		z-index: 120;
		height: calc(100% - 2rpx - 70rpx - 135rpx);
		/*出问题检查rpx是否可以计算*/
		width: 100%;
		bottom: 70rpx;
		display: flex;
		justify-content: center;
	}

	.line {
		background-color: lightgrey;
		z-index: 130;
		height: 2rpx;
		width: 95%;
		position: absolute;
		top: 135rpx;
	}

	.scroll {
		margin: 20rpx 30rpx 20rpx 30rpx;
		/* background-color: bisque;	 */
	}

	.scroll_pay {
		margin: 10rpx 30rpx 0 30rpx;
	}

	.baba {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.baba::after {
		content: '';
		width: 30%;
	}

	.baba_pay {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.scroll-item {
		width: 220rpx;
		aspect-ratio: 3 / 4;
		position: relative;
		margin-bottom: 20rpx;
	}

	.scroll-img {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		filter: brightness(0.8);
		vertical-align: bottom;
	}

	.video_status_lock {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 32rpx;
		background-color: rgba(255, 0, 0, 0.5);
		color: white;
		border-radius: 16rpx 0;
		padding: 1% 3% 1% 3%;
	}

	.video_status_unlock {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 32rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border-radius: 16rpx 0;
		padding: 1% 3% 1% 3%;
	}

	.video_ep {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 10%;
		color: white;
		font-size: 32rpx;
		padding: 0 10rpx 20rpx 0;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.scroll-item-pay {
		width: 315rpx;
		aspect-ratio: 3 / 2;
		position: relative;
		margin-bottom: 16rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		line-height: 35rpx;
		text-align: center;
		border-style: solid;
		border-radius: 16rpx;
		border-color: lightgrey;

	}

	.block_bottom {
		position: absolute;
		bottom: 0;
		color: white;
		line-height: 55rpx;
		font-size: 35rpx;
		width: 100%;
		text-align: center;
		background-color: gainsboro;
		border-radius: 0 0 16rpx 16rpx;
	}

	.block_bottom text {
		vertical-align: middle;
	}

	.msg_money {
		margin-bottom: 10rpx;
	}

	.tips {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		z-index: 599;
		font-size: 32rpx;
	}

	.label_color1 {
		position: absolute;
		top: 0;
		left: 0;
		height: 32rpx;
		border-radius: 16rpx 0;
		line-height: 32rpx;
		padding: 5rpx;
		color: white;
		background-color: gold;
		font-size: 32rpx;
		padding: 10rpx;
	}
	.label_color2 {
		position: absolute;
		top: 0;
		left: 0;
		height: 32rpx;
		border-radius: 16rpx 0;
		line-height: 32rpx;
		padding: 5rpx;
		color: white;
		background-color: red;
		font-size: 32rpx;
		padding: 10rpx;
	}
	.label_no_color{
		position: absolute;
		top: 0;
		left: 0;
		height: 32rpx;
		border-radius: 16rpx 0;
		line-height: 32rpx;
		padding: 5rpx;
		color: white;
		/* background-color: red; */
		font-size: 32rpx;
		padding: 10rpx;
	}
</style>